// ---------------------------- 获取文章列表，渲染 ------------------------
function renderArticle() {
    $.ajax({
        url: '/my/category/list',
        success: function (res) {
            // console.log(res);
            if (res.status === 0) {
                let html = '';
                res.data.forEach(item => {
                    // console.log(item);
                    html += `
                                <tr>
                                    <td>${item.name}</td>
                                    <td>${item.alias}</td>
                                    <td>
                                        <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" class="layui-btn layui-btn-xs" lay-submit lay-filter="formDemo">编辑</button>
                                        <button data-id="${item.id}" type="reset" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                                    </td>
                                </tr>
                `
                })
                $('tbody').html(html)
            }
        }
    })
}

renderArticle()

// ------------------------  删除分类 -----------------------
$('tbody').on('click', 'button:contains("删除")', function () {
    // console.log(1);
    // 获取id
    let id = $(this).data('id')
    // console.log(id);
    // 询问是否要删除
    layer.confirm('你真的舍得删除我吗^+^', function (index) {
        // console.log(id);
        $.ajax({
            url: '/my/category/delete',
            data: {
                id: id
            },
            success: function (res) {
                console.log(res);
                // 无论成功或者失败都要提醒用户
                // layer.msg(res.message);
                if (res.status === 0) {
                    // 删除成功后重新渲染
                    renderArticle()
                }

            }
        })
        // 关闭弹层
        layer.close(index);
    })
})

// ------------------------  添加操作 -----------------------
// 定义全局变量
let addIndex
// 点击按钮出现弹层
$('button:contains("添加类别")').on('click', function () {
    // console.log(1);
    addIndex = layer.open({
        type: 1,
        title: '添加类别'
        , content: $('#tpl_add').html(),
        area: ['500px', '250px']
    });
})

// 完成添加，关闭弹层
$('body').on('submit', '#add_form', function (e) {
    // 阻止默认行为
    e.preventDefault();
    $.ajax({
        url: '/my/category/add',
        type: 'post',
        data: $(this).serialize(),
        success: function (res) {
            // console.log(res);
            layer.msg(res.message);
            if (res.status === 0) {
                // 删除成功后重新渲染
                renderArticle()
            }
        }
    })
    // 关闭弹层
    layer.close(addIndex);
})

// ------------------------  编辑操作 -----------------------
// 定义全局变量
let editIndex
// 点击编辑按钮出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
    // 获取事件源（编辑按钮）的三个data-xxx的属性值
    let data = $(this).data()
    console.log(data);
    // console.log(1);
    editIndex = layer.open({
        type: 1,
        title: '添加编辑',
        content: $('#tpl_edit').html(),
        area: ['500px', '250px'],
        success: function () {
            // 弹出出现后执行的函数，这里完成数据回填
            let form = layui.form;
            // console.log(form);
            form.val('edit', data)
        }
    });
})

// 完成添加，关闭弹层
$('body').on('submit', '#add_edit', function (e) {
    // 阻止默认行为
    e.preventDefault();
    $.ajax({
        url: '/my/category/update',
        type: 'post',
        data: $(this).serialize(),
        success: function (res) {
            // console.log(res);
            layer.msg(res.message);
            if (res.status === 0) {
                // 删除成功后重新渲染
                renderArticle()
            }
        }
    })
    // 关闭弹层
    layer.close(editIndex);
})